<template>
  <!-- vx提现-->
  <div class="withdrawal" @click="withdrawalClick">
    <!-- <p>提现人:{{ withdrawalName }}</p> -->
    <p>
      <!-- {{ username }} -->
      <span @click="tuichuClick">[切换登录]</span>
    </p>
    <div class="withdrawal_select">
      <input
        @blur="cardBlur"
        @click.stop="choiceCardClick"
        type="text"
        placeholder="请选择银行卡号(须与实名认证一致)"
        v-model="cardinfo"
      />
      <input type="text" placeholder="输入提现数量" v-model="num" />
      <div>
        可提现<span>￥{{ money }}</span
        >积分
      </div>
      <ul v-show="bankListShow">
        <li
          v-for="(item, index) in bankList"
          :key="index"
          @click.stop="choiceokClick(index)"
        >
          {{ item.cardNum }}&nbsp;&nbsp;&nbsp;{{ item.bankName }}
        </li>
        <li @click.stop="addCardClick">添加银行卡号</li>
      </ul>
    </div>
    <!-- <p>
      提现规则:
      <br />1、单笔提现需满100元 <br />2、提现金额为50元的整数倍
      <br />3、提现为1个工作日
    </p> -->
    <div class="withdrawal_btn" @click="okwithdrawalClick">立即提现</div>
    <div
      class="withdrawal_addCard"
      v-show="addCardShow"
      @click.stop="withdrawal_addCardClick"
    >
      <p>添加银行卡</p>
      <input type="text" placeholder="开户人真实姓名" v-model="addName" />
      <input type="text" placeholder="银行卡号" v-model="addCard" />
      <div @click.stop="okAddCardClick">添加银行卡号</div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
import { getCookie } from '@/util/cookie'
import { userAddBankCard, userWithdrawText, userCardList, userUserInfo, userPostWithdraw } from '@/api/recharge'
import { useRouter, useRoute } from 'vue-router'
import { Toast } from 'vant'
import 'vant/lib/index.css'
export default defineComponent({
    setup() {
        const router: any = useRouter()
        const route: any = useRoute()
        const data = reactive<Record<string, any>>({
            balance: 0,
            token: getCookie("token"),
            userId: getCookie("userId"),
            openId: "",
            cardinfo: "",
            card: "",
            bankName: "",
            num: "",
            username: "",
            money: "当前可提现0元",
            withdrawalName: "",
            bankList: "",
            bankListShow: false,
            addCardShow: false,
            addName: "",
            addCard: "",
        })
         if (!data.token) {
            router.push({
                path: '/login',
                query: {
                    reductName: route.path
                }
            })
        }
        const withdrawalClick = (): void => {
            data.bankListShow = false;
            data.addCardShow = false;
        }
        const withdrawal_addCardClick = (): void => {
            return 
        }
        const choiceCardClick = (): void => {
        //选择银行卡
            data.bankListShow = true;
        }
        const choiceokClick = (index: number): void => {
            //改变银行卡
            data.cardinfo =
            data.bankList[index].cardNum + "   " + data.bankList[index].bankName;
            data.card = data.bankList[index].cardNum;
            data.bankName = data.bankList[index].bankName;
            data.bankListShow = false;
        }
        const addCardClick = (): void => {
            //添加银行卡
            data.bankListShow = false
            // this.addCardShow = true;
            router.push({
                path: "/withdrawal_push"
            })
        }
        const okAddCardClick = async (): Promise<void> => {
            let params = {
                userId: data.userId,
                name: data.addName,
                cardNum: data.addCard,
                token: data.token,
            }
            if (data.addName && data.addCard) {
                const dataRes = await userAddBankCard(params)
                Toast(dataRes.data.text);
                getBalance();
                data.addCardShow = false;
                data.addName = "";
                data.addCard = "";
            } else {
                Toast("不能为空");
            }
        }
        const getBalance = (): void => {
            const params = {
                userId: data.userId,
                token: data.token,
            }
            const text = async (): Promise<void> => {
                //获取可提现金额实名信息
                const dataRes = await userWithdrawText(params)
                if (dataRes.data.status == 0) {
                    data.balance = dataRes.data.result.balance;
                    data.withdrawalName = dataRes.data.result.name;
                    data.money = dataRes.data.result.balance;
                    data.num = "";
                } else if (dataRes.data.status != 2) {
                    Toast(dataRes.data.text);
                    data.money = "当前可提现0元";
                    data.num = "";
                }
            }
            const card = async (): Promise<void> => {
                const dataRes = await userCardList(params)
                if (dataRes.data.status == 0) {
                    data.bankList = dataRes.data.result;
                }
            }
            const info = async (): Promise<void> => {
                const dataRes = await userUserInfo(params)
                if (dataRes.data.status == 0) {
                    data.username = dataRes.data.result.user.nickname;
                } else {
                    // location.reload();
                }
            }
            text()
            card()
            info()
        }
        const onCopy = (): void => {
            Toast("复制成功")
        }
        const onError = (): void => {
            Toast("复制失败")
        }
        const tuichuClick = (): void => {
            document.cookie = "userId=; expires=Thu, 01 Jan 1970 00:00:01 GMT;";
            document.cookie = "token=; expires=Thu, 01 Jan 1970 00:00:01 GMT;";
            document.cookie = "openId=; expires=Thu, 01 Jan 1970 00:00:01 GMT;";
            router.push({
                path: "/login",
                query: {
                    reductName: route.path
                }
            });
        }
        const getCode = (): void => {
            let codeUrl = "";
            let url = encodeURIComponent(
                "http://h5.paipaixingqiu.com/h5/#/withdrawal"
            );
            codeUrl =
                "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxd35b45f47cc708a7&redirect_uri=" +
                url +
                "&response_type=code&scope=snsapi_base&state=123#wechat_redirect";
            location.href = codeUrl;
        }
        const cardBlur = (): void => {
            return
        }
        const okwithdrawalClick = async (): Promise<void> => {
            let params = {
                userId: data.userId,
                account: data.card,
                num: data.num,
                bankName: data.bankName,
                token: data.token,
            }
            if (data.num % 10 != 0 || data.num < 100) {
                Toast("您输入的金额不符合提现规则");
            } else {
                if (data.num > data.balance) {
                    Toast("您的可提现金额不足");
                    data.num = "";
                } else {
                    const dataRes = await userPostWithdraw(params)
                    Toast(dataRes.data.text);
                    if (dataRes.data.status == 0) {
                        data.cardinfo = ""
                        data.num = ""
                        setTimeout(() => {
                            getBalance()
                        }, 1000)
                    }
                }
            }
        }
        getBalance()
        return {
            cardBlur,
            okwithdrawalClick,
            withdrawalClick,
            withdrawal_addCardClick,
            getCode,
            choiceCardClick,
            addCardClick,
            choiceokClick,
            tuichuClick,
            okAddCardClick,
            onCopy,
            onError,
            ...toRefs(data)
        }
    }
})
</script>

<style lang="less" scoped>
@import './WithdrawalComponent.less';
</style>
